@charset 'utf-8';
@color:#ccc;
@color-a:white;
@color-b:#FF5C00;
html{
    width: 100%;
}
body{
    width: 100%;
    position: relative;
}
// 第一部分
.header{
    width: 100%;
    height: 40px;
    .header-top{
        width: 100px;
        height: 0;
        display: block;
    }
    .header-middle{
        background-color: #333333;
        .center{
           a{
               display: inline-block;
               height: 40px;
               line-height: 40px;
               font-size: 12px;
               color: #b0b0b0;
               &:hover{
                   text-decoration: none;
                   color:white;
               }
           }
           >.header-a{
               position: relative;

               >.xiazai{
                   width: 130px;
                   height: 160px;
                   display: none;
                   position:absolute ;
                   top: 40px;
                   left: -40px;
                   box-shadow: 3px 3px 3px 3px #cccc;
                   background-color: white;


                >.jiantou{
                    height:7px;
                    width:7px;
                    border-color:transparent transparent white transparent;
                    border-style:solid;
                    border-width:7px;
                    position: absolute;
                    top: -13px;
                    left: 50px;

                }
                >.qucode{
                         >dl{
                      
                      >dt>img{
                       width: 110px;
                       margin: 10px;
                      }
                      >dd{
                        text-align: center;
                          color: black;
                          font-size: 14px;
                      }
                  }
                }
               }
               &:hover .xiazai{
                   display: block;
                   z-index: 8;
               }
           }
           
           span{
            display: inline-block;
            height: 40px;
            line-height: 40px;
            font-size: 12px;
            color: #b0b0b0;
            padding: 0 3px;
           }
           >.header-one{
            float: right;
            position: relative;
            >a{
               padding:0 30px;

            }
            >a:hover{
                background-color: white;
                color: red;
            }
            &:hover .shop-hide{
                display: block;
                z-index: 8;
            }
            >.shop-hide{
                width: 316px;
                height: 80px;
                display: none;
                padding-top: 20px;
                position: absolute;
                top: 40px;
                right: 0;
                box-shadow: 1px 3px 3px 3px #ccc;
                background-color: white;
                >p{
                    height: 40px;
                    line-height: 40px;
                    text-align: center;
                }
            }
           }
           >.header-two{
            float: right;
            padding-right: 5px;
           }
        }
    }
   
}
//第二部分
.cabinet{
    width: 100%;
    height: 80px;
    position: relative;
    border-bottom: 1px solid #ccc;

    .center{
        // background-color: aqua;
        >ul{
            list-style: none;
            >li{
                float: left;
                >.show-hide{
                    display: none;
                 position: absolute;
                 top: 80px;
                 left: 0;
                 width: 100%;
                 height: 288px;
                //  border-top: 1px solid #ccc;
                 >div{
                     margin: 0 auto;
                     width: 1226px;;
                     height: 100%;
                     .show-a-one{
                         >img{
                             border: none;
                         }
                     }
                     >a{
                         display:block;
                         float: left;
                         width: (floor(1200px/6));
                         height: 100%;
                         text-align: center;
                         color: black;
                         >p{
                             line-height: 1;
                         }
                         :nth-child(3){
                             color: red;
                         }
                        >img{
                            border-right: 1px solid #333333;
                            margin:40px 0;
                        }
                        


                     }
                 }
                }
                &:hover .show-hide{
                    display: block;
                    // border-top: 1px solid #ccc;
                    z-index: 10;
                    background-color: white;
                    animation: change .2s;
                }

                >a{
                 display: block;
                 height: 80px;
                 padding: 0 10px;
                 color: black;
                 line-height: 80px;
                 &:hover{
                     text-decoration: none;
                     color: red;
                 }

                }
            }
            >li:nth-child(1){
             >a{
                 display: block;
                 width: 56px;
                  background-image: url(../images/logo-mi2.png);
                  background-repeat: no-repeat;
                  background-size: 56px;
                  background-position: 0 12px;
                  margin-right: 142px;
             }
            }
            >li:nth-child(2){
                    &:hover .ban-left{
                        display: block;
                        border: 1px solid @color-b;
                        animation: change .2s;
                    }
                    @keyframes change {
                        0% {
                         height: 0;
                        }
                        
                        /* 这种语法 可以在0% 至 100%之间 添加任意的动画关键帧 */
                        100% {
                          height: 288px;
                        }
                      }
                    >.ban-left{  
                        display: none;  
                        width: 234px;
                        height: 460px;
                        position: absolute;
                        top: 80px;
                        left: 146px;
                        z-index: 9;
                        background-color: white;
             
                    >ul{
                        >li:nth-child(1){
                            margin-top: 20px;
                        }
                        >li{
                            width: 100%;
                            height: 42px;
                            
                             &:hover .ban-hide{
                                 display: block;
                                 z-index: 10;
                             }
                            >a{
                                display: block;
                                width: 100%;
                                height: 100%;
                                line-height: 42px;
                                text-indent: 2rem;
                                color: black;
                                &::after{
                                 content:"  > ";
                                 float: right;
                                 margin-right: 20px;
                                 color: #ccc;
                                 font-size: 20px;
                                 vertical-align: middle;
                              }
                                &:hover{
                                    background-color: #FF6700;
                                    text-decoration: none;
                                }
                            }
                            >.ban-hide{
                                width: 992px;
                                height: 460px;
                                position: absolute;
                                top: 0;
                                left: 239px;;
                                background-color: white;
                                display: none;
                               >ul{
                                   float: left;
                                   width: 248px;
                                   height: 100%;
                                   >li{
                                       width: 100%;
                                       height:(floor(460px/6));
                                       >a{
                                           display: block;
                                           width: 100%;
                                           height: 100%;
                                           color: black;
                                           text-align: center;
                                           line-height:( floor(460px/6)) ;
                                           &:hover{
                                               text-decoration: none;
                                               color: red;
                                           }
                                           >img{
                                               display: inline-block;
                                               width: 50px;
                                               height: 50px;
                                           }
                                       }
                                   }
                               }
                            }
                        }
                     
                    }
             
                     }
            }
        }
        >.cabinet-a{
            float: right;
            >a{
                display: block;
                float: right;
                border: 1px solid black;
                margin-top: 15px;
                text-decoration: none;
                color: gray;
                padding:0 3px;
                &:nth-child(1){
                    width: 52px;
                    height: 50px;
                    text-align: center;
                    line-height: 50px;
                    .icon-sousuo{
                        font-size: 20px;
                        font-weight: 800;
                    }
                    &:hover{
                        background-color: #FF6700;
                        color: white;
                    }
                    
                }
                &:nth-child(2){
                    width: 245px;
                    height: 50px;
                    line-height: 50px;

                }
            }
        }
    }
}
//  第三部分
.stickness{
    width: 100%;
    height: 60px;
    position: sticky;
    top: 0;
    box-shadow: 3px 3px 3px 3px #ccc;
    background-color: @color-a;
   z-index: 1;
    >.center{
      height: 100%;
      >.stick-left{
        float: left;
        >h2{
            height:60px;
            display: inline-block;
            font-size: 18px;
            font-weight: 400;
            line-height: 60px;
            color: #424242;
            margin: 0;
        }
        >a{
            font-size: 12px;
            color: #383636;
            line-height: 60px;
            &:hover{
              text-decoration: none;
              color: @color-b;
            }
        }
      }
      >.stick-right{
        float: right;
        >a{
            display: inline-block;
            height: 60px;
            line-height:60px;
            color: #333333;
            padding: 0 10px ;
            &:hover{
                text-decoration: none;
                color: @color-b;
            }
        }

      }
      >.stick-middle{
          float: right;
          >a{
                display: block;
                margin-top: 16px;
                width: 118px;
                height: 28px;
                line-height: 28px;
                text-align: center;
                background-color: @color-b;
                color: @color-a;
                border: 1px solid #b0b0b0;
                &:hover{
                    color: @color-a;
                    text-decoration: none;
                }
          }
      }

    }
}
// 第四部分
.phones-c{
    width: 100%;
}
.phones-a{
    width: 100%;
    background-image: url(../images/do.01.png);
    background-repeat: no-repeat;
    background-size: 1519px 765px ;
    >.center{
        position: relative;
        height: 765px;
        >.phones-a-fixde{
            position: absolute;
            top: 300px;
            left: 0;
            width: 400px;
            >img{
                width: 400px;
                height: 116px;
            }
            >p{
                font-size: 40px;
                padding: 20px 0;
            }
        }
    }
}
.phones-b{
    width: 100%;
    height: 1137px;
    background-image: url(../images/do.02.jpg);
    >.center{
        overflow: hidden;
        >h1:nth-child(1){
            margin-top: 200px;
        }
      >h1{
          text-align: center;
          color: @color-a;
          line-height: 1;
      }
      >img{
          width: 947px;
          height: 452px;
          display: block;
          margin: 30px auto 0;
      }
    }
}










//   底部
.footer{
    >.foo-top{
        width: 100%;
        >.center{
            >.foo-roof{
                border-bottom: 1px solid #ccc;

              >a{
                  display: inline-block;
                width:(floor(1170px/5));
                height: 80px;
                line-height: 80px;
                font-size: 16px;
                color: #616161;
                text-align: center;
                &:hover{
                    text-decoration: none;
                    color: #FF6A00;

                }
                >span{
                    font-size: 24px;
                }
            
              }
              >span{
                  color: #ccc;
                  font-size: 20px;
              }
            }
            >.foo-base{
              >ul{
                  width: 160px;
                  float: left;
                  padding: 40px 0;
                  >li:nth-child(1){
                      >h1{
                          font-size: 14px;
                          font-weight: 500;
                          margin-bottom: 26px;

                      }
                  }
                  >li{
                      >a{
                          font-size: 12px;
                          display: block;
                          line-height: 1;
                          margin: 10px 0;
                          color: #757575;
                          &:hover{
                              color: #F25807;
                              text-decoration: none;
                          }
                      }
                  }
              }
              >.foo-base-right{
                  width: 252px;
                  float: right;
                  margin-top: 60px;
                  border-left:1px solid #e0e0e0;
                  >p{
                      display: block;
                      margin: 0 0 5px;
                      text-align: center;
                  }
                  >p:nth-child(1){
                     font-size:22px;
                     line-height: 1;
                     color: #F25807;
                  }
                  >p:nth-child(2){
                      font-size: 12px;
                      color: #616161;
                  }
                  >p:nth-child(3){
                      >a{
                          display: block;
                          width: 120px;
                          height: 30px;
                          border: 1px solid #F25807;
                          line-height: 30px;
                          margin-left: 66px;
                          color: #F25807;
                          background-color: white;
                          text-align: center;
                          &:hover{
                              text-decoration: none;
                              background-color: #F25807;
                              color: white;
                          }
                      }
                  }
                  >p:nth-child(4){
                      text-align: center;
                      >a{
                        color: #616161;
                        &:hover{
                            color: #F25807;
                        }
                      }
                }
              }






            }
        }
    }

}

.footer-bottom{
    padding: 30px 0 60px 0;
    width: 100%;
    height: 265px;
    background-color: #FAFAFA;
    font-size: 12px;
    >.center{
        position: relative;
        >.foo-bot-left{
            float: left;
           >img{
               display: block;
               margin-right: 20px;
               width: 56px;
               height: 56px;
           }

        }
        >.foo-bot-right{
            float: left;
            >p{
                >p:nth-child(1){
                    >a{
                        color: #333333;
                    }
                }
                >p:nth-child(2){
                    color: #333333;

                }

                >p:nth-child(3){
                   color: #b0b0b0;
                   >a{
                    color: #b0b0b0;;
                }
                }
                >p:nth-child(4){
                   color: #b0b0b0;
                   >a{
                    color: #b0b0b0;;
                }
                }
                >p:nth-child(5){
                   color: #b0b0b0;
                   >a{
                    color: #b0b0b0;;
                }
                }
                >p:nth-child(6){
                   color: #b0b0b0;
                   >a{
                    color: #b0b0b0;;
                }
                }
                color: #757575;
                >a{
                    font-size: 12;
                    color: #757575;
                    &:hover{
                        text-decoration: none;
                        color: #F25807;
                    }
                }
            }
            >div{
                width: 100%;
                height: 19px;
                position: absolute;
                top: 200px;
                left: 0;
                text-align: center;
                color: #BFBFBF;
                font-size: 20px;
            }
            
        }
    }
}

// 定位部分
.div-fiexd{

    position: fixed;
    bottom: 70px;
    right: 0;
    z-index: 99;
    >a{

        display:block;
        width: 80px;
        height: 80px;
        color: #757575;
        text-align: center;
        border: 1px solid #ccc;
        background-color: white;
        padding: 14px 0 0 0;
       >p{
           line-height: 1;
       }
        >p>span{
              font-size: 30px;
        }
        &:hover{
            text-decoration: none;
            color: #F25807;
        }
        >.d-hide{
            display: none;
            position: absolute;
            top: 0;
            right: 100px;
           padding: 10px;
            background-color: white;
            >img{
                width: 100px;
                height: 100px;
            }
        }
       
    }
    >.f-a-one:hover >.d-hide{
        display: block;
        color: #333333;
    } 

}